<template>
  <div class="login-container">
    <div class="login-box">
      <el-form class="login-form" ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.user_name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goLogin">登录</el-button>
          <el-button>注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { login_req } from "@/api/user.js";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      form: {
        user_name: "",
        password: "",
      },
    };
  },
  created() {
    console.log(this.$store);
  },
  computed: {
    ...mapState("user_m", ["info"]),
  },
  methods: {
    ...mapActions("user_m", ["login_a"]),
    goLogin() {
      // 收集表单数据
      console.log(this.form);
      // 发送ajax
      /* let result = await login_req(this.form);
      console.log(result); */
      this.login_a(this.form);
      // 清空输入框
      // 判断是否登录成功？成功跳转home
      if (this.info == "登录成功！！") {
        this.$router.push({ name: "home" });
      }
    },
  },
};
/* 
主要针对于ui库  ui库当中有很多个组件
在每个项目当中ui库的所有组件都会用到吗？不可能
 将ui库中所有的组件都引入
 完全引入 将ui库中的所有组件都引入
大部分的项目都只会用到ui中的某些组件
按需引入  需要哪些组件引入哪些
element-ui
npm i element-ui -S

完全引入

按需引入
npm i element-ui -S
npm install babel-plugin-component -D



针对组件
全局注册  在入口文件当中注册  全局注册的组件在任何组件中都可以使用
局部注册  只能在当前组件当中使用


假如 账号：zheshu010101  密码：123456

输入账号密码 点击登录 发送ajax 将账号密码发送给服务器，服务器返回信息 登录成功。。。
发送ajax  axios  axios二次封装
接口分类


登录成功之后 获取到了{info: token}
注册  
如果没有登录 弹出提示框  请没有用户名和密码 请去注册页面进行注册
注册按钮绑定事件 跳转到注册页面 进行注册

登录成功之后  主页上就有用户名
info token 用户名 作为公共值很多组件都在用
vuex
vuex 分模块 user模块

如果登录成功，跳转到主页 home










*/
</script>

<style lang="scss" scoped>
.login-container {
  // width: 100%;
  height: 100%;
  background-image: url("../../assets/img/bggrey.jpg");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 300px;
    height: 200px;
    background-image: url("../../assets/img/bggrey.jpg");
    background-size: 100% 100%;
    border: 2px solid white;
    .login-form {
      width: 100%;
      height: 100%;
      /*  padding-top: 10px;
      padding-left: 10px;
      padding-right: 20px; */
      padding: 10px 20px 0 10px;
      box-sizing: border-box;
    }
  }
}
</style>